<template>
  <div>
    <div class="q">
      <img :src="item.dogUrl" />
      <p @click="addDogFn">{{item.name}}</p>
    </div>
  </div>
</template>

<script>
export default {
    props: ['item','index'],
    methods: {
      addDogFn() {
        this.$emit('dog',this.index)
      }
    }
};
</script>

<style scoped>
.q {
  width: 200px;
  height: 200px;
  text-align: center;
  border: 1px solid #333;
  float: left;
}
.q img {
  width: 100%;
  height: 100%;
}
</style>